<template>
	<view class="my h100">
		<view class="my-top">
			<view class="flex s-center">
				<image src="/static/img/my/portrait.png" class="portrait"></image>
				<view class="msg">
					<text class="txt">{{userInfo.nickName || 'admin'}}</text>
				</view>
			</view>
		</view>
		<view class="card" style="margin: 20rpx 20rpx;">
			<u-list class="list">
				<u-list-item v-for="item in indexList" :key="item.name">
					<u-cell :icon="item.icon" :title="item.name" :isLink="item.url ? true : false" @click="handleClick(item.url)">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<u-button @tap="logout()" class="logout" shape="circle" color="linear-gradient(83deg, #B8B9BF 1%, #B7BABF 99%)"> 退出登录 </u-button>
	</view>
</template>

<script setup>
	import {
		getAuthorization
	} from '@/router/auth.js'
	// 基础变量
	const userInfo = getAuthorization('userInfo')
	const value = ref('light')
	let version = ref('1.0.0')
	const indexList = [{
		icon: '/static/img/my/1.png',
		name: '我的填报',
		url: '/pages/my/personDetail'
	}, {
		icon: '/static/img/my/2.png',
		name: '我的发布',
		url: '/pages/my/personDetail'
	}]
	// 基础变量
	const handleClick = (url) => {
		if (url) {
			uni.navigateTo({
				url
			});
		}
	}
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出并清理缓存吗?',
			success(res) {
				if (res.confirm) {
					uni.clearStorage({
						success: function() {
							console.log('Clear storage success!');
						}
					});
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.my {
		&-top {
			padding: calc(80rpx + var(--status-bar-height)) 40rpx 0;
			background: url('@/static/img/my/bg.png') no-repeat;
			background-size: 100% 100%;
			height: 300rpx;

			.portrait {
				width: 200rpx;
				height: 200rpx;
			}

			.msg {
				color: #ffffff;
				margin-left: 20rpx;

				.txt {
					font-size: 52rpx;
					position: relative;
				}

				.team {
					position: relative;
					padding-left: 30rpx;
				}
			}
		}

		.list {
			background: #fff;
		}

		.logout {
			width: 90%;
			border: 0.5px solid #cdcdcd;
			position: absolute;
			left: 5%;
			bottom: 3%;
		}
	}
</style>